<%@ include file="../common/top.jsp"%>
<script src="https://kit.fontawesome.com/ded7430fd5.js" crossorigin="anonymous"></script>

<div class="Back">
    <a href="productForm?productId=${sessionScope.product.productId}" class="BackLink">
        <i class="fa-solid fa-circle-left"></i>
        Return to ${sessionScope.product.productId}
    </a>
</div>

<div class="Item" style="margin:0 auto;padding-bottom: 30px;" >

    <table valign="middle" style="border-top: 5px solid rgb(245 153 162);border-bottom: 5px solid rgb(245 153 162);padding: 20px" align="center">
        <tr>
            <td rowspan="3" colspan="2" style="text-align: center" width="200px">${sessionScope.product.description}</td>
            <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px"><b>${sessionScope.item.itemId}</b></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px"><b>${sessionScope.product.name}</b></td>
        </tr>
        <c:if test="${sessionScope.item.quantity > 10000} ">
            <tr>
                <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px"><b>${sessionScope.item.quantity} in stock.</b></td>
            </tr>
        </c:if>
        <c:if test="${sessionScope.item.quantity <= 10000}">
            <c:if test="${sessionScope.item.quantity >1000}">
                <tr>
                    <td colspan="2" style="text-align: center;background:rgb(255, 255, 255);border-radius: 10px"><b>${sessionScope.item.quantity} in stock.</b></td>
                </tr>
            </c:if>
        </c:if>
        <c:if test="${sessionScope.item.quantity <= 1000}">
            <tr>
                <td colspan="2" style="text-align: center;background: rgb(255, 255, 255);border-radius: 10px;border: 100px solid #000000"><b>${sessionScope.item.quantity} in stock.</b></td>
            </tr>
        </c:if>

        <tr>
            <td colspan="4" style="text-align: center">
                <b>
                    ${sessionScope.item.attribute1} ${sessionScope.item.attribute2}
                    ${sessionScope.item.attribute3} ${sessionScope.item.attribute4}
                    ${sessionScope.item.attribute5} ${sessionScope.product.name}
                </b>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;font-size: 50px;color: #ff0000;background: rgb(255, 255, 255);border-radius: 100px">
                <b>
                    <fmt:formatNumber value="${sessionScope.item.listPrice}" pattern="$#,##0.00" />
                </b>
            </td>
            <td colspan="2" style="text-align: center">
                <div class="ButtonDiv">
                   <a href="addItemToCart?workingItemId=${sessionScope.item.itemId}" class="Button">
                        <i class="fa-solid fa-cart-shopping"></i>Add to Cart
                   </a>
                </div>
            </td>
        </tr>
    </table>

</div>

<%@ include file="../common/bottom.jsp"%>